import {
  ControlOutlined,
  ClearOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu } from 'antd';
import type { GetProp, MenuProps } from 'antd';
import Sider from 'antd/es/layout/Sider';
import { Content } from 'antd/es/layout/layout';
import React, { useState } from 'react';
import ConfigStorage from './component/setting/ConfigStorage';
import { useNavigate } from 'react-router-dom'
import { Clean } from './component/setting/Clean';
import { DogInTheManger } from './config/TitleBarHiddenInset';

export default function Setting() {
  const [selectedItem, setSelectedItem] = useState('clean');
  const navigate = useNavigate();

  const show = (key: string) => {
    return key == selectedItem ? 'block' : 'none'
  }

  const back = () => {
    navigate(-1)
  }

  type MenuItem = GetProp<MenuProps, 'items'>[number];

  const items: MenuItem[] = [
    {
      key: 'clean',
      icon: <ClearOutlined />,
      label: '附件清理',
    },
    {
      key: 'configStorage',
      icon: <ControlOutlined />,
      label: '保存路径',
    },
  ];

  return <>
    <div style={{
      '--wails-draggable': 'drag',
      paddingLeft: 5,
    } as React.CSSProperties}>
      <DogInTheManger />
      <Button onClick={back}>返回</Button>
    </div>
    <Layout style={{ background: 'none' }}>
      <Sider style={{ background: 'none' }}>
        <Menu
          defaultSelectedKeys={['clean']}
          style={{ width: 200 }}
          mode='inline'
          items={items}
          onSelect={(item) => { setSelectedItem(item.key) }}
        />
      </Sider>
      <Content style={{ padding: '0 24px', minHeight: 280 }}>
        <div style={{ display: show('configStorage') }}>
          <ConfigStorage />
        </div>
        <div style={{ display: show('clean') }}>
          <Clean />
        </div>
      </Content>
    </Layout >
  </>
}
